<template>
    <div>
      <!-- {{ arr }}
      <hr />
      <table border="1" cellspacing="0" width="50%">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in obj" :key="index">
            <td @click="ck(item.name, $event)">{{ item.name }}</td>
            <td @click="ck(item.age, $event)">{{ item.age }}</td>
            <td @click="ck(item.sex, $event)">{{ item.sex }}</td>
          </tr>
        </tbody>
      </table>
      <hr />
      {{ sum }}
      <hr>
      <div>{{ num | myNum }}</div>
      <hr>
      <div v-show111="isShow">自定义变颜色</div>
      <hr>
      <h1>父组件</h1>
      <span>我是父组件:{{ arr2 }}</span>
      <button @click="ck1">点击传送</button>
      <hr>
      <son :arr="arr" love="刘旭幺儿爸爸爱你" @send="getdata" ref="child"></son>
      <hr> -->
      <!-- <comchild></comchild>
      <cino></cino> -->
      <div v-for="item in arr1" :key="item" class="box" @click="ck2(item)" :class="com == item ? 'box' : 'box1'">{{ item }}</div>
      <component :is="com"></component>
    </div>
  </template>
  
  <script>
  import son from './SOM/son.vue';
  export default {
    data() {
      return {
        isShow: true,
        arr: [12, 3, 4, 2, 5],
        arr1: ['son', 'cino', 'comchild'],
        obj: [
          { name: "张三", age: 12, sex: "男" },
          { name: "李四", age: 15, sex: "女" },
        ],
        num: 3,
        arr2: '',
        com: 'son'
      };
    },
    computed: {
      sum() {
        return 3;
      },
    },
    counted() { },
    created() { },
    methods: {
      ck(val, b) {
        alert(val + b.target.innerHTML);
      },
      // 获取子元素
      getdata(value) {
        this.arr2 = value
      },
      ck1() {
        this.$refs.child.ck()
      },
      ck2(value) {
        this.com = value
      }
    },
    watch: {
      num: {
        handler(newvalue) {
          console.log(newvalue);
        },
        immediate: true
      }
    },
    components: {
      son
    }
  };
  </script>
  <!-- scoped 改样式只是在当前页面起作用，局部样式 -->
  <style  scoped>
  .box {
    width: 100px;
    height: 100px;
    outline: 1px solid red;
    display: inline-block;
    background-color: red;
  }
  
  .box1 {
    background-color: white;
  }
  </style>